// Input styling

/*
* CHECKBOXES
*/

// Apply this class to elements that should represent toggles instead of
// regular checkboxes.
.cb-toggle {
  position: relative;
  display: inline-block !important;
  width: @input-size;
  height: @input-size / 2;
  margin:0 !important;
  padding: 0;

  input { display: none !important; }

  .toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .4s;
    border-radius: @input-size / 3 - @input-margin;
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, .25);

    &:before {
      position: absolute;
      content: "";
      height: @input-size / 2 - @input-margin * 2; // Fancy equations here!
      width: @input-size / 2 - @input-margin * 2;
      box-shadow: @input-margin @input-margin 5px 0px rgba(0, 0, 0, .5);
      left: @input-margin;
      bottom: @input-margin;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
  }

  input:checked + .toggle:before { transform: translateX(@input-size / 2); }
}

.radio-toggle {
  position: relative;
  display: inline-block !important;
  width: @input-size / 2;
  height: @input-size / 2;
  margin:0 !important;
  padding: 0;

  input { display: none !important; }

  .toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: @input-size / 3 - @input-margin;

    // Inner part
    &:before {
      position: absolute;
      content: "";
      height: @input-size / 2 - @input-margin * 4; // Fancy equations here!
      width: @input-size / 2 - @input-margin * 4;
      left: @input-margin * 2;
      bottom: @input-margin * 2;
      background-color: transparent;
      border-radius: 50%;
      transition: .4s;
    }
  }
}

// This class can be applied to the wrapper div of a checkbox-toggle to
// make the label and the toggle align on the same level.
.cb-group {
  margin: 5px;
  & > label { line-height: @input-size / 2 + @input-margin * 2; vertical-align: middle; }
  & > input[type="radio"] { margin:0 !important; }
  & > .cb-toggle { margin-right:0.2em; }
}

/*
 * SLIDERS / RANGES
 */

 input[type=range] {
     -webkit-appearance: none;
     width: 100%;

   &:focus { outline: none; }
   &::-webkit-slider-runnable-track {
     width: 100%;
     height: @input-size / 2;
     cursor: pointer;
     border-radius: @input-size / 4 + @input-margin;
     padding: @input-margin;
     box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, .25);
   }

   &::-webkit-slider-thumb {
     height: @input-size / 2 - @input-margin * 2;
     width: @input-size / 2 - @input-margin * 2;
     border-radius: 100%; // Round thumb
     cursor: pointer;
     -webkit-appearance: none;
     margin-top: 0px;
     box-shadow: @input-margin @input-margin 5px 0px rgba(0, 0, 0, .5);
   }
}

progress {
  border: 0;
  height: @input-size;
  border-radius: @border-radius;
}
